<template>
  <div v-if="loading">
    <div class="con">
      <div class="title" v-if="!aleradyEvaluated">
        <div>为了提升我们的服务质量与您的体验</div>
        <div style="margin-top: 3px;">请您对本次会话做出评价~</div>
      </div>
      <div v-else>
        您已完成本次会话评价
      </div>
      <div class="evaluate_type" v-if="!evaluate">
        <div class="evaluate_unit" @click="evaluate = '101'">
          <svg-icon class="svg_icon-type" name="haoping"></svg-icon>
          <div class="sub_title">好评</div>
        </div>
        <div class="evaluate_unit" @click="evaluate = '102'">
          <svg-icon class="svg_icon-type" name="yiban"></svg-icon>
          <div class="sub_title">一般</div>
        </div>
        <div class="evaluate_unit" @click="evaluate = '103'">
          <svg-icon class="svg_icon-type" name="chaping"></svg-icon>
          <div class="sub_title">差评</div>
        </div>
      </div>
      <div v-else>
        <div class="evaluate_result">
          <div style="flex: 0.7; text-align: right;">
            <svg-icon v-if="evaluate == 101" class="svg-icon-result" name="haoping"></svg-icon>
            <svg-icon v-else-if="evaluate == 102" class="svg-icon-result" name="yiban"></svg-icon>
            <svg-icon v-else class="svg-icon-result" name="chaping"></svg-icon>
          </div>
          <div class="evaluate_result_sub">
            <span>{{ evaluate == '101' ? '好评' : evaluate == '102' ? '一般' : evaluate == '103' ? '差评' : '' }}</span>
            <span>感谢您对本次会话作出的评价</span>
          </div>
        </div>
      </div>
      <div class="evaluate_text">
        <van-field
          style="border: 1px solid #fafafa;"
          v-model="value"
          :disabled="aleradyEvaluated"
          rows="5"
          autosize
          type="textarea"
          maxlength="200"
          placeholder="请输入您对本次会话服务的评价（200字以内）"
          show-word-limit
        />
      </div>
      <div class="save-btn" v-if="!aleradyEvaluated">
        <van-button round block size="normal" type="info" @click="submit">提交</van-button>
      </div>
    </div>
    <van-popup v-model="show" round :close-on-click-overlay="false">
      <div class="confirm_content">
        <div class="confirm_info">
          已成功完成评价
        </div>
        <div class="confirm_button">
          <van-button
            round
            block
            size="small"
            type="info"
            @click="
              show = false
              aleradyEvaluated = true
            "
          >
            确定
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { addEvaluation, getEvaluation } from '@/api/evaluate.js'
import { getWxCode, getQueryValue, baiduMapError, splitName } from '@/utils/index'

export default {
  name: 'evaluate',
  data() {
    return {
      aleradyEvaluated: false,
      show: false,
      value: '',
      evaluate: null,
      poolId: '',
      tenantId: '',
      loading: false,
    }
  },
  methods: {
    submit() {
      if (!this.evaluate) {
        this.$toast({ type: 'fail', message: '请选择评价类型', icon: 'none' })
        return
      }
      if (!this.value) {
        this.$toast({ type: 'fail', message: '请输入评价语', icon: 'none' })
        return
      }
      addEvaluation({
        poolId: this.poolId,
        msgType: '31',
        content: JSON.stringify({
          menu_id: this.evaluate,
          content: this.value,
        }),
        evaluationType: this.evaluate,
        // tenantId: this.tenantId
      }).then((res) => {
        if (res.code === 200) {
          // this.aleradyEvaluated = true
          this.show = true
        }
      })
    },
  },
  async created() {
    this.loading = false
    this.$toast.loading()
    await getWxCode()
    if (sessionStorage.getItem('userinfo')) {
      // this.tenantId = this.$route.query.tenantId
      this.poolId = this.$route.query.poolId
      getEvaluation({ poolId: this.poolId, msgType: '31' }).then((res) => {
        if (res.code === 200) {
          if (res.data.evaluationType) {
            this.evaluate = res.data.evaluationType
          }
          if (res.data.content) {
            let eva = JSON.parse(res.data.content)
            if (eva.content) {
              this.value = JSON.parse(res.data.content).content
            }
            if (eva.menu_id) {
              this.evaluate = JSON.parse(res.data.content).menu_id
            }
          }
          if (this.value && this.evaluate) {
            this.aleradyEvaluated = true
          }
        }
        this.loading = true
        this.$toast.clear()
      })
    }
  },
}
</script>
<style lang="less" scoped>
.svg_icon-type {
  height: 45px;
  width: 45px;
  color: #c6c6c6;
}
.svg-icon-result {
  height: 60px;
  width: 60px;
  margin-right: 10px;
  color: #f5ee35;
}
.con {
  margin: 40px 10px 0px 10px;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  min-height: 500px;
  .title {
    margin-top: 30px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
  }
  .evaluate_type {
    margin-top: 40px;
    display: flex;
    justify-content: space-around;
    .evaluate_unit {
      text-align: center;
      .sub_title {
        margin-top: 5px;
      }
    }
  }
  .evaluate_text {
    margin-top: 40px;
  }
  .evaluate_result {
    margin-top: 40px;
    display: flex;
    .evaluate_result_sub {
      // flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
.save-btn {
  width: 90%;
  margin: 20px auto;
  .van-button {
    height: 40px;
    line-height: 40px;
  }
}
.confirm_content {
  height: 200px;
  width: 300px;
  padding: 10px;
  background: url('../../assets/success.svg') no-repeat center center;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  .confirm_info {
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
  }
}
</style>
